ECMA2018

ECMA2018 多了一個很有趣的功能：異步迭代器（Asynchronous Iterators），其他內容就幾乎是偏向開發體驗了，讓我們開始吧

1. 異步迭代器（Asynchronous Iterators）：新增了一系列的語法：for-await-of 來做搭配使用

async function* asyncGenerator() {
  yield await Promise.resolve(1);
  yield await Promise.resolve(2);
  yield await Promise.resolve(3);
}

(async () => {
  for await (let num of asyncGenerator()) {
    console.log(num);
  }
})();
// 輸出：
// 1
// 2
// 3

其中的 async function* 為一個生成函式，內部會使用 yield 來暫停函式並且產生一個值，丟出去函式當成階段式的回傳內容，以上面的範例為例， for await(let num of asyncGenerator()) 這段會每次接收內部的 yield 並且把結果放到 num 來做使用。
2. Promise.finally()：無論 Promise 是否成功，都可以在最後執行所需要的動作

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error))
  .finally(() => console.log('Fetch operation completed'));

3. Rest/Spread 屬性：允許在物件內使用展開運算符來塞屬性

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, ...obj1 };
console.log(obj2); // { c: 3, a: 1, b: 2 }

const { a, ...rest } = obj2;
console.log(a); // 1
console.log(rest); // { b: 2, c: 3 }

4. 正則表達式改進
   包含了一些方便的改動，像是命名捕獲組、反向斷言和 dotAll

// 命名捕獲組
const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = re.exec('2023-08-25');
console.log(match.groups.year); // 2023

// 反向斷言
const re2 = /(?<=\$)\d+/;
console.log(re2.exec('$123')); // ['123']

// dotAll 模式
const re3 = /hello.world/s;
console.log(re3.test('hello\nworld')); // true

ECMA2019

ECMA2019 主要像是拓展一些現有的功能，提供更加方便的寫法

1. Array.flat()：array.flat 主要功能為將多層的 Array 壓平，可以透過參數決定要壓到幾層

const arr = [1, 2, [3, 4, [5, 6]]];
console.log(arr.flat()); // [1, 2, 3, 4, [5, 6]]
console.log(arr.flat(2)); // [1, 2, 3, 4, 5, 6]

並且也提供了拓展功能 flatmap

const arr2 = [1, 2, 3, 4];
console.log(arr2.flatMap(x => [x, x * 2])); // [1, 2, 2, 4, 3, 6, 4, 8]

2. Object.fromEntries()：將 key-value 形式的陣列轉成物件，為 Object.entries 的逆操作

const entries = [['name', 'Alice'], ['age', 30]];
const obj = Object.fromEntries(entries);
console.log(obj); // { name: 'Alice', age: 30 }

3. String.trimStart() 或 String.trimEnd()：單邊的 trim()

const str = '   Hello, World!   ';
console.log(str.trimStart()); // 'Hello, World!   '
console.log(str.trimEnd()); // '   Hello, World!'

4. try-catch 的可選錯誤參數：可以省略 catch 中的參數

try {
  // 可能會拋出錯誤的代碼
} catch {
  // 處理錯誤，但不需要錯誤對象
  console.log('An error occurred');
}

5. Array.sort() 穩定排序：當排序權重一樣時不更改位置

const arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Alice' }
];

arr.sort((a, b) => a.name.localeCompare(b.name));
console.log(arr);
// 輸出：
// [
//   { id: 1, name: 'Alice' },
//   { id: 3, name: 'Alice' },
//   { id: 2, name: 'Bob' }
// ]
// 注意：具有相同名字的元素保持了原有的順序